<script setup>
import { onMounted } from 'vue'
let  shopName ="天津滨海国际机场"
function initMap() {
  // 百度地图API功能
  var map = new BMapGL.Map("l-map");            // 创建Map实例
  map.centerAndZoom("天津滨海国际机场", 14);
  /* var myKeys = [shopName];
   var local = new BMapGL.LocalSearch(map, {
     renderOptions:{map: map, panel:"r-result"},
     pageCapacity:1
   });
   local.search(myKeys)*/
  map.enableScrollWheelZoom(true);
}
onMounted(() => {
  initMap()
})
</script>

<template>

  <div style="margin-top: 20px;margin-left: 10px">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/main/echarts' }"><b>首页</b></el-breadcrumb-item>
      <el-breadcrumb-item><b>查询信息管理</b></el-breadcrumb-item>
      <el-breadcrumb-item>航站地图</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="all" style="margin-top: 70px">
    <div class="main">
      <div class="radius">
        <div id="l-map"></div>
        <div id="r-result"></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
#l-map{height:650px;width:1250px; text-align: center;}
#r-result{width:100%;}
.all{
  background-color: #eeeeff;
}
.main {
  width: 1260px;
  border: #409eff
}
.radius{
  margin-top: 85px;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
}
#l-map {
  margin-left: 70px;
  height: 600px;
  width: 90%;
  border: 2px solid #ccc; /* 添加2px宽度、实线边框，颜色为灰色 */
  border-radius: 5px;
}
</style>